<template>
  <div>
      <!-- 搜索卡片区 -->
    <el-card class="box-card">
      <!-- 命名插槽，头部内容 -->
      <div slot="header" class="clearfix">
          <span>发布文章</span>
      </div>
      <!-- 匿名插槽，内容主体 -->
      <div class="text item">
        <!-- el-form搜索表单区域 -->
        <!-- prop跟校验规则相连接 -->
        <!-- rules表单校验规则 -->
        <el-form ref="addFormRef" :model="addForm" label-width="120px" :rules="addFormRules">
            <el-form-item label="标题" prop='title'>
                 <el-input v-model="addForm.title"></el-input>
            </el-form-item>

            <el-form-item label="内容" prop="content">
              <quill-editor v-model="addForm.content"></quill-editor>
            </el-form-item>

            <el-form-item label="封面">
              <el-radio-group v-model="addForm.cover.type">
              <!-- label是属性绑定，其值由下方addForm.cover.type决定，要求为整型 -->
                  <el-radio  :label="1">单图</el-radio>
                  <el-radio  :label="3">三图</el-radio>
                  <el-radio  :label="0">无图</el-radio>
                  <el-radio  :label="-1">自动</el-radio>
                </el-radio-group>
              <ul>
                <!--  showDialog为对话框显示事件，参数为当前点击框，从1开始-->
                <li class="uploadbox" v-for="item in covernum" @click="showDialog(item)" :key="item">
                  <span>点击图标选择图片</span>
                  <!-- 初始没有图片，所以显示三个icon -->
                  <img v-if="addForm.cover.images[item-1]" :src="addForm.cover.images[item-1]" alt="" />
                  <div v-else class="el-icon-picture-outline"></div>
                </li>
              </ul>
            </el-form-item>

            <el-form-item label="频道" prop='channel_id'>
              <!-- <el-select v-model="addForm.channel_id" placeholder="请选择" clearable >
                   <el-option
                      v-for="item in channelList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                   </el-option>
              </el-select> -->
              <!-- 使用组件 -->
              <channel-com @slt='selectHandler'></channel-com>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <!-- true为存入草稿，false为发布 -->
              <el-button type="primary" @click="addArticle(false)">发布</el-button>
              <el-button @click="addArticle(true)">存入草稿</el-button>
            </el-form-item>
        </el-form>
      </div>
      <!-- 对话框中图片 -->
      <!-- visible.sync对话框的显示与隐藏 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%">
         <ul class="lala">
          <li class="image-box" v-for="item in imageList" :key="item.id">
            <!-- 点击图片，显示高亮效果 -->
            <img :src="item.url" @click="selectImage" alt="没有图片" >
          </li>
        </ul>
        <span slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary" @click="imageOK">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>

// 引入富文本编辑器相关CSS文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入富文本编辑器模块(es6模块化按需导入)
import { quillEditor } from 'vue-quill-editor'

// 导入频道列表独立组件
import ChannelCom from '@/components/channel.vue'

export default {
  name: 'articleadd',
  created () {
    // this.getChannels()
    // this.addArticle()
    this.getImageList()
  },
  // 通过计算属性来决定选择框的个数
  computed: {
    covernum () {
      if (this.addForm.cover.type > 0) {
        return this.addForm.cover.type
      }
      return 0
    }
  },
  // 注册富文本编辑器模块
  components: {
    quillEditor,
    // 注册频道列表独立组件
    ChannelCom
  },
  data () {
    return {
      // 选中的素材图片的路径名地址信息
      materialUrl: '',
      // 用来存放当前选中的框的序号
      xu: 0,
      // 图片素材
      imageList: [],
      queryData: {
        collect: false,
        page: 1,
        per_page: 20
      },
      // 对话框的显示和隐藏
      dialogVisible: false,
      // 配置表单校验规则
      addFormRules: {
        title: [
          { required: true, message: '标题必填' },
          { min: 5,
            max: 30,
            message: '标题长度介于5-30个字符' }
        ],
        content: [{ required: true, message: '内容必填' }],
        channel_id: [{ required: true, message: '频道必选' }]
      },
      // channelList: [],
      addForm: {
        title: '',
        content: '',
        channel_id: '',
        // 图片
        cover: {
          type: 0, // 封面类型 -1:自动，0-无图，1-1张，3-3张
          images: []
        }
      }

    }
  },
  methods: {
    // 素材图片选取好，点击“对话框”确定按钮后，记录素材图片，并关闭对话框
    imageOK () {
      if (this.materialUrl) {
        // 给添加文章的表单域成员cover.image增加素材图片请求地址信息
        this.addForm.cover.images[this.xu] = this.materialUrl
        // 关闭对话框
        this.dialogVisible = false
      } else {
        this.$message.error('没有喜欢的嘛')
      }
    },
    // 点击选中的图片高亮显示
    selectImage (evt) {
      let lis = document.querySelectorAll('image-box')
      for (var i = 0; i < lis.length; i++) {
        // 显示高亮效果
        lis[i].style.border = ''
        // 将当前选中的图片的路径地址信息给封面图片数组中
      }
      // 给li设置border边框，高亮效果
      evt.target.parentNode.style.border = '4px solid red'
      // 把选中的图片路径保存起来
      this.materialUrl = evt.target.src
    },
    // 获取图片素材列表
    getImageList () {
      let pro = this.$http.get('/user/images', { params: this.queryData })
      pro
        .then(result => {
          // console.log(result)
          this.imageList = result.data.data.results
        })
        .catch(err => {
          return this.$message.error('获取图片素材失败:' + err)
        })
    },
    // 对话框的显示和隐藏
    showDialog (n) {
      // n为当前点击的选择框，从1开始，赋值给序号要-1，需要从0开始
      this.xu = n - 1
      this.dialogVisible = true
    },
    // 声明selectHandler事件方法
    selectHandler (val) {
      this.addForm.channel_id = val
    },
    // // 获取频道列表
    // getChannels () {
    //   // 通过axios发送请求得到真实频道数据
    //   let pro = this.$http.get('/channels')
    //   pro
    //     .then(result => {
    //       // console.log(result) // config data headers status
    //       // 把获取的频道数据赋给频道列表
    //       this.channelList = result.data.data.channels
    //     })
    //     .catch(err => {
    //       return this.$message.error('获取频道信息错误' + err)
    //     })
    // },
    // 添加文章
    // flag:true  发布一个草稿文章
    // flag:false 发布一个正式文章
    addArticle (flag) {
      // 表单校验
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          // axios发送请求
          let pro = this.$http.post('/articles', this.addForm, { params: { draft: flag } })
          pro
            .then(result => {
              // console.log(result)
              this.$message.success('发布文章成功')
              this.$router.push('/article')
            })
            .catch(err => {
              return this.$message.error('发布文章失败' + err)
            })
        }
      })
    }
  }
}
</script>

<style lang='less' >
// 深度css样式选择器  el-form为祖先，会被编译为el-form[data-v-xx] .ql-editor,寻找祖先的子集
// ql-editor是浏览器自动解析的class选择器
.el-form /deep/ .ql-editor {
  height: 200px;
}
// 或者可以避免scoped带来的影响，就可以不使用深度作用选择器
// .ql-editor{
//   height: 200px;
// }

// 文章封面选择框样式
.uploadbox {
  list-style: none;
  width: 200px;
  height: 200px;
  margin: 10px;
  float: left;
  cursor: pointer;
  border: 1px solid #eee;
  span {
    width: 200px;
    height: 50px;
    line-height: 50px;
    display: block;
    text-align: center;
  }
  div {
    width: 200px;
    height: 150px;
    font-size: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
  img{
    width: 200px;
    height: 150px;
  }
}
// 对话框素材图片列表相关css样式

.lala{
  width: 100%;
  height: 100%;
  overflow: hidden;
.image-box {
  list-style: none;
  width: 200px;
  height: 140px;
  background-color: #fff;
  margin: 10px;
  float: left;
  border: 1px solid #eee;
  cursor:pointer;
  box-sizing:border-box;
  img {
    width: 100%;
    height: 100%;
  }
}
}
</style>
